<template>
<div class="user">
    <div class="common-form">{{$t('plus.send_coupon')}}</div>
    <div class="product-content">
      <el-form ref="form" size="small" :model="form" label-width="150px">
        <el-form-item :label="$t('plus.send_target')">
          <el-radio v-model="form.send_type" label="1">{{$t('plus.all_members')}}</el-radio>
          <el-radio v-model="form.send_type" label="2">{{$t('plus.member_level')}}</el-radio>
          <el-radio v-model="form.send_type" label="3">{{$t('plus.specific_members')}}</el-radio>
        </el-form-item>

        <el-form-item :label="$t('plus.select_level')" v-if="form.send_type == 2">
          <el-select v-model="form.user_level" :placeholder="$t('plus.please_select')">
            <el-option
              v-for="(item, index) in grade"
              :key="index"
              :label="item.name"
              :value="item.gradeId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('plus.select_members')" v-if="form.send_type == 3">
          <div class="d-s-s d-c">
            <el-button @click="openGetuser" icon="Plus">{{$t('plus.select_members')}}</el-button>
            <ul class="d-s-s select-user">
              <li
                class="mr10 d-c-c d-c p-10-0"
                v-for="(item, index) in select_list"
                :key="index"
              >
                <img
                  :src="item.avatarUrl"
                  class="radius"
                  :width="30"
                  :height="30"
                />
                <p class="lh18 ww100 text-ellipsis">{{item.nickName}}</p>
              </li>
            </ul>
          </div>
        </el-form-item>

        <el-form-item
          :label="$t('plus.select_coupon')"
          prop="name"
          :rules="[{  required: true,  message: ' '}]"
        >
          <el-input
            type="text"
            v-model="form.name"
            :placeholder="$t('plus.please_select_coupon')"
            class="max-w460"
            :disabled="true"
          ></el-input>
          <el-button @click="openConpon" icon="Plus">{{$t('plus.select_coupon')}}</el-button>
          <el-col
            >{{$t('plus.note_limit_reached')}}
</el-col
          >
        </el-form-item>

        <!--提交-->
        <div class="common-button-wrapper">
          <el-button
            size="small"
            type="primary"
            @click="onSubmit"
            :loading="loading"
            >{{$t('plus.submit')}}</el-button
          >
        </div>
      </el-form>
    </div>

    <!--选择用户-->
    <GetUser :is_open="open_getuser" @close="closeGetuserFunc"></GetUser>

    <!--选择优惠券-->
    <GetCoupon
      v-if="open_coupon"
      :open_add="open_coupon"
      @closeDialog="closeCouponFunc($event, 'add')"
    ></GetCoupon>
  </div>
</template>

<script>
import CouponApi from "@/api/coupon.js";
import GetUser from "@/components/user/GetUser.vue";
import GetCoupon from "@/components/coupon/GetCoupon.vue";
export default {
  components: {
    GetUser,
    GetCoupon
  },
  data() {
    return {
      /*是否加载完成*/
      loading: false,
      /*表单数据对象*/
      form: {
        send_type: "1",
        coupon_id: 0,
        user_level: "",
        user_ids: "",
        name: ""
      },
      /*用户等级列表*/
      grade: {},
      /*获取用户是否显示*/
      open_getuser: false,
      /*选择的用户列表*/
      select_list: [],
      /*是否显示获取优惠券*/
      open_coupon: false
    };
  },
  created() {
    /*获取等级*/
    this.getGradeList();
  },
  methods: {
    /*获取等级*/
    getGradeList() {
      let self = this;
      CouponApi.toSendCoupon({}, true).then(res => {
        self.grade = res.data;
      }).catch(error => {});
    },
    /*打开获取用户*/
    openGetuser() {
      this.open_getuser = true;
    },
    /*关闭获取用户*/
    closeGetuserFunc(e) {
      if (e && e.type != "error") {
        this.select_list = this.select_list.concat(e.params);
      }
      this.open_getuser = false;
    },
    /*选择优惠券*/
    openConpon() {
      this.open_coupon = true;
    },
    /*关闭优惠券*/
    closeCouponFunc(e) {
      this.open_coupon = false;
      if (e && e.type != "error") {
        this.form.name = e.params.name;
        this.form.coupon_id = e.params.couponId;
      }
    },
    /*提交*/
    onSubmit() {
      let self = this;
      let params = {};
      params.sendType = self.form.send_type;
      params.couponId = self.form.coupon_id;
      params.userLevel = self.form.user_level;
      params.name = self.form.name;
      /*如果是指定用户*/
      if (params.sendType == 3) {
        let user_ids = [];
        self.select_list.forEach(item => {
          user_ids.push(item.userId);
        });
        params.userIds = user_ids;
      }
      CouponApi.SendCoupon(params, true).then(data => {
        self.loading = false;
        ElMessage({
          message: $t("plus.send_success"),
          type: "success"
        });
      }).catch(error => {
        self.loading = false;
      });
    }
  }
};
</script>

<style scoped="scoped">
.select-user li {
  width: 30px;
}
</style>

